<template>
  <div>
    <nly-breadcrumb>
      <nly-breadcrumb-item
        icon="nlyfont nly-icon-home-fill"
        to="/"
        text="首页"
      />
      <nly-breadcrumb-item
        icon="nlyfont nly-icon-outlet"
        to="/shop1/goods"
        active
        text="一番赏管理"
      />
    </nly-breadcrumb>
    <Modal v-model="modal2" width="950px" @on-cancel="cancel">
      <p
        style="margin: 0; color: rgb(255, 102, 0); text-align: center"
        slot="header"
      >
        <span v-if="!update">
          <Icon type="ios-add-circle-outline" style="margin-right: 5px" />
          <span>添加</span>
        </span>
        <span v-else>
          <Icon type="md-create" style="margin-right: 5px" />
          <span>修改</span>
        </span>
      </p>
      <div>
        <div class="flex">
          <div
            style="
              width: 130px;
              line-height: 30px;
              text-algin: end;
              margin-right: 10px;
            "
          >
            一番赏名称
          </div>
          <i-input
            v-model="dataText.name"
            placeholder="请输入一番赏名称"
          ></i-input>
        </div>
        <br />
        <div class="flex">
          <div
            style="
              width: 130px;
              line-height: 30px;
              text-algin: end;
              margin-right: 10px;
            "
          >
            价钱
          </div>
          <i-input v-model="dataText.price" placeholder="请输入价钱"></i-input>
        </div>
        <br />

        <div class="flex">
          <div
            style="
              width: 110px;
              line-height: 30px;
              text-algin: end;
              margin-right: 10px;
            "
          >
            一番赏图片
          </div>

          <div class="formItemImage">
            <div style="width: 100%">
              <ImagePanel
                style="margin-left: 10px"
                @on-confirm="confirm_images"
                mode="multi"
              >
                <Button type="primary">上传图片</Button>
              </ImagePanel>
            </div>
            <div
              style="width: 150px; height: 150px; cursor: zoom-in"
        
              v-if="dataText.img"
            >
              <img
                :src="dataText.img"
                style="width: 150px; height: 150px; cursor: zoom-in"
                alt=""
              />
            </div>
          </div>
        </div>
        <br />
      </div>
      <div slot="footer">
        <Button type="primary" :loading="loading" @click="save">保存</Button>
        <Button @click="modal2 = false">取消</Button>
      </div>
    </Modal>
    <div class="content" style="padding-left: 10px">
      <row>
        <i-col :md="6" :sm="12">
          <Input
            v-model="searchText"
            search
            placeholder="请输入名称搜索"
            enter-button="搜索"
            @on-search="search(searchText)"
          />
        </i-col>
      </row>
      <br />
      <Table
        border
        size="small"
        :columns="tableheader"
        :data="goodslist"
        @on-selection-change="enterall"
      >
       
        <template slot-scope="{ row }" slot="switch">
          <i-switch
            v-model="row.state"
            size="large"
            :true-value="1"
            :false-value="0"
            @on-change="change_upNew(row.id, row.state)"
          >
            <span slot="open">上架</span>
            <span slot="close">下架</span>
          </i-switch>
        </template>
        <template slot-scope="{ row }" slot="action">
          <Button type="warning" size="small" @click="lookgoods(row.id)"
            >mini一番赏列表</Button
          >
          <Button
            type="primary"
            size="small"
            style="margin-left: 16px"
            @click="changegoods(row)"
            icon="ios-brush"
            >修改</Button
          >
          <Button
            style="margin-left: 16px"
            type="error"
            size="small"
            @click="remove(row.id)"
            icon="md-close"
            >删除</Button
          >
        </template>
      </Table>
    </div>
    <div class="Page">
      <Page
        :total="total"
        show-elevator
        show-total
        :page-size="data.pageSize"
        :current="data.page"
        @on-change="get_page"
      />
    </div>
  </div>
</template>

<script>
import apis from "@/api/shop1";
import ImagePanel from "@/components/ImagePanel.vue";
export default {
  components: {
    ImagePanel,
  },
  data() {
    return {
      count_scale: [], 
      go_home_page: [],
      classname: [],
      videolist: [],
      searchText: "",
      update: false,
      total: 0,
      modalText: false,
      modal2: false,
      loading: false,
      data: {
        page: 1,
        pageSize: 10,
        name: "",
        type: 2,
        seriesId:''
      },
      dataText: {
        img: "",
        name: "",
        price: "",
        type: 2,
        state: 1,
        rank: 0,
      },
      tableheader: [
        {
          title: "ID",
          key: "id",
          width: 90,
          align: "center",
        },
        {
          title: "一番赏名称",
          key: "name",
          align: "center",
          tooltip: true,
        },
        {
          title: "价钱",
          key: "price",
          align: "center",
        },
        
        {
          title: "创建时间",
          key: "createTime",
          align: "center",
        },

        {
          title: "上下架",
          slot: "switch",
          width: 120,
          fixed: "right",
          align: "center",
        },
        {
          title: "操作",
          slot: "action",
          width: 350,
          fixed: "right",
          align: "center",
        },
      ],
      goodslist: [],
      enteralldata: [],
    };
  },
  created() {
     this.data.seriesId = this.$route.query.seriesId;
    this.getperson();
  },
  methods: {
    change_type(val) {
      console.log(val);
      this.dataText.rank = "";
      this.dataText.rank = val;
    },
    lookgoods(id) {
      this.$router.push({
        path: "/shop/onetwo",
        query: {
          id: id,
        },
      });
    },
    arrSplit(str) {
      if ((str || "").split(",")[0]) {
        return str.split(",")[0];
      } else {
        return "";
      }
    },
    change_upNew(id, val) {
      let data = {
        id: id,
        state: val,
      };
      apis
        .uplist(data)
        .then((response) => {
          if (response.data.code == 0) {
            this.$Message.success("修改成功");
          } else {
            this.$Message.error("修改失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$Message.error("修改失败!");
        });
    },
    deleteimg(index) {
      this.go_home_page.splice(index, 1);
    },
    confirm_images(val) {
      console.log(val);
      this.dataText.img = val[0];
    },

    deletevideo(index) {
      this.videolist.splice(index, 1);
    },
    confirm_video(val) {
      this.videolist.push(...val);
    },
    getperson() {
      apis.getlist(this.data).then((response) => {
        if (response.data.code == 0) {
          this.goodslist = response.data.data.list;
          this.total = response.data.data.countNumber;
        } else {
          this.$Message.error("请求失败!");
        }
      });
    },
    get_page(page) {
      this.data.page = page;
      this.getperson();
    },
    search(val) {
      this.data.page = 1;
      let data = this.data;
      data.name = val;
      this.getperson();
    },
    create() {
      this.modal2 = true;
      this.update = false;
    },
    changegoods(e) {
      console.log(e);
      this.dataText.name = e.name;
      this.dataText.img = e.img;
      this.dataText.price = e.price;
      this.dataText.id = e.id;
      this.dataText.rank = e.rank + "";
      this.modal2 = true;
      this.update = true;
    },

    enterall(e) {
      this.enteralldata = e;
    },
    save() {
      this.loading = true;
      if (this.update) {
        apis
          .updatelist(this.dataText)
          .then((response) => {
            this.loading = false;
            if (response.data.code == 0) {
              this.$Message.success("修改成功！");
              this.modal2 = false;
              this.getperson();
            } else {
              this.$Message.error("修改失败");
            }
          })
          .catch((error) => {
            this.loading = false;
            console.log(error);
            this.$Message.error("修改失败!");
          });
      } else {
        console.log(this.data);
        apis
          .add_list(this.dataText)
          .then((response) => {
            this.loading = false;
            if (response.data.code == 0) {
              this.$Message.success("添加成功！");
              this.modal2 = false;
              this.getperson();
            } else {
              this.$Message.error("添加失败");
            }
          })
          .catch((error) => {
            this.loading = false;
            console.log(error);
            this.$Message.error("添加失败!");
          });
      }
    },
    remove(id) {
      this.$Modal.confirm({
        title: "删除确认",
        content: `确定删除该一番赏？删除后无法恢复`,
        onOk: () => {
          apis
            .delete_list({
              id: id,
            })
            .then((response) => {
              if (response.data.code == 0) {
                this.getperson();
                this.$Message.success("删除成功");
              } else {
                this.$Message.error("删除失败");
              }
            })
            .catch((error) => {
              console.log(error);
              this.$Message.error("删除失败!");
            });
        },
        onCancel: () => {},
      });
    },
    cancel() {
      this.modal2 = false;
      this.update = false;
    },
  },
};
</script>

<style scoped>
.ivu-modal {
  width: 50% !important;
}

.ivu-btn {
  margin-bottom: 0px;
}

.Page {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-bottom: 10px;
}

.image {
  max-width: 400px;
  max-height: 200px;
  margin: 10px;
}

.formItemImage {
  display: flex;
  justify-items: left;
  align-items: center;
  flex-wrap: wrap;
}

.formItemImage .ivu-col {
  margin-bottom: 16px;
}

.formItemImage img {
  height: 100%;
}

.button_large {
  padding: 0px 20px;
}

.ivu-input-number {
  width: 100% !important;
}
</style>